<template>
  <div class="container">
    <el-image style="width: 220px; height: 180px" :src="imageUrl" fit="fill" />
    <el-button type="primary" @click="updateThumbnail(220, 180)">更新缩略图</el-button>
    <el-button type="primary" @click="updateView">更新锚点</el-button>
    <el-button type="primary" @click="updateFlyTo">飞行到锚点</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ESCameraView } from 'earthsdk3'
const props = defineProps({
  objm: {
    type: Object,
    required: true,
  },
})

const imageUrl = ref(
  '',
)
const sceneObject = props.objm.createSceneObject(ESCameraView)
sceneObject.position = [117.81737566151948, 34.57576364830162, 1148.38952607802]
sceneObject.rotation = [275.18149884348827, -30.58065712810649, 359.9993753392597]
sceneObject.duration = 3

//thumbnail缩略图   监听thumbnail
sceneObject.thumbnailChanged.don((newValue) => {
  imageUrl.value = newValue
})
//更新缩略图
const updateThumbnail = (width, height) => {
  sceneObject.capture(width, height) //获取缩略图并直接设置到thumbnail属性上
}
// 设置为当前视角
const updateView = () => {
  console.log('当前视角更新成功')
  //sceneObject.resetWithCurrentCamera()//设置为当前视角   //本质修改的是该对象的position和rotation
  sceneObject.resetWithCurrentCamera()
}

// 飞行定位
const updateFlyTo = () => {
  sceneObject.flyTo()
}
</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  top: 560px;
  right: 10px;
  width: 260px;
  padding: 20px;
  background-color: rgba(29, 37, 45, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  button {
    width: 220px;
    height: 40px;
    margin: 0;
  }
}
</style>
